<template>
  <div class="card-color card-margin">
    <div class="user-notebook-info" >
      <div class="head-item card-header"><i class="el-icon-s-fold" />&nbsp;目录</div>
      <transition-group name="list" tag="div">

         <div v-bind:class="{ 'choose-menu': item.id == $store.state.chooseMenuId }" class="left-item menu-item" v-for="(item,index) in notebookList" :key="item.id" @click="menuClick(item)" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
           <template v-if="item.icon">
             <div  style="width:25%;font-size: 2.3em;padding: 6px 15px;box-sizing: border-box;">
               <icon-svg :icon-class="item.icon" />
             </div>
           </template>
           <template v-else>
             <div style="width:25%;padding:6px 15px;box-sizing: border-box;"><img :src="gen_text_img([30,30],item.name,index)" /></div>
           </template>
           <div style="width:50%;overflow: hidden;">{{item.name}}</div>
           <div style="width:25%"><span style="font-size: 12px;color: #5a5f7bf0;" v-if="item.noteCount>0">{{item.noteCount}} 篇</span></div>
         </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import IconSvg from '../../components/icon'
export default {
  name: 'menu',
  components: {
    IconSvg
  },
  data: function () {
    return {
      notebookList: [],
      page: {
        current: 1,
        size: 999,
        total: 0
      }
    }
  },
  created () {
    this.queryAllNoteBook()
  },
  methods: {
    queryAllNoteBook: function () {
      request({
        url: '/notebook/notebook/query',
        method: 'post',
        data: this.page
      }).then(res => {
        if (res.result) {
          this.notebookList = res.data.data
          this.$store.state.menu = this.notebookList
          if (this.$route.query && Object.keys(this.$route.query).length > 0) {

          } else {
            if (this.notebookList && this.notebookList.length > 0) {
              this.menuClick(this.notebookList[0])
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    menuClick: function (menu) {
      this.$store.state.chooseMenuId = menu.id
      this.$emit('menuClick', menu)
    },
    changeActive ($event) {
      if ($event.currentTarget.className && $event.currentTarget.className.indexOf('choose-menu') > 0) {
        $event.currentTarget.className = 'left-item menu-item card-hover-color choose-menu'
      } else $event.currentTarget.className = 'left-item menu-item card-hover-color'
    },
    removeActive ($event) {
      if ($event.currentTarget.className && $event.currentTarget.className.indexOf('choose-menu') > 0) {
        $event.currentTarget.className = 'left-item menu-item choose-menu'
      } else $event.currentTarget.className = 'left-item menu-item'
    },
    gen_text_img: function (size, s, index) {
      let colors = [
        'rgb(239,150,26)', 'rgb(255,58,201)', 'rgb(111,75,255)', 'rgb(36,174,34)', 'rgb(80,80,80)'
      ]
      let cvs = document.createElement('canvas')
      cvs.setAttribute('width', size[0])
      cvs.setAttribute('height', size[1])
      let ctx = cvs.getContext('2d')
      ctx.fillStyle = colors[index % 5]
      ctx.fillRect(0, 0, size[0], size[1])
      ctx.fillStyle = 'rgb(255,255,255)'
      ctx.font = size[0] * 0.6 + 'px Arial'
      ctx.textBaseline = 'middle'
      ctx.textAlign = 'center'
      ctx.fillText(s.substring(0, 1), size[0] / 2, size[1] / 2)
      return cvs.toDataURL('image/jpeg', 1)
    }
  }
}
</script>

<style>
  .menu-item{
    display: flex;
    flex-direction: row;
    text-align: left;
    font-size:13px;
    font-weight: bold;
  }

</style>
